<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          公告管理
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新增公告</el-button>
          </div>
        </div>
        <el-table :data="bulletin" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="announcementTitle" label="标题" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">{{scope.row.announcementTitle}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="bc" label="用户类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="announcementAt" label="发送日期" align="center" >
          </el-table-column>
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="bulletin.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 公告详情 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">公告详情</span>
      </div>
      <div class="jx-detail topic-detail">
        <div class="content">
          <div class="title">
            {{currentRow.announcementTitle || '--'}}
          </div>
          <div class="info">
            <div class="info-item">
              <div class="item">
                <span>发送时间：{{currentRow.announcementAt || '--'}}</span>
                <!-- <span>评论：1290</span> -->
                <span>用户类型：<em>{{currentRow.bc || '--'}}</em></span>
              </div>
            </div>
          </div>
          <div class="content-item" v-html="currentRow.announcementContent">
          </div>
        </div>
      </div> 
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.setting.bulletin,
        boo: {
          loading: false,
          showDialog: false,
        },
        other: {
          allRow: 1,
          saveing: false,
        },
        bulletin: '',
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.bulletin = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        let params = {
          path: '/setting/detail/bulletin_detail'
        }
        _self.$router.push(params.path)
      },
      viewRow(item){
        let _self = this
        _self.boo.showDialog = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.currentRow = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(`${_self.https.detail}${item.announcementId}`, {}, success)
      },
      // 删除
      deleteRow(item){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.delete(`${_self.https.detail}${item.announcementId}`, {}, success)
      },
      submitRow(formName){
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-dialog /deep/ .el-dialog__body
    padding: 10px 20px
  .topic-detail
    .content
      padding: 0 5px 20px
      .title
        font-size: 19px
        color: #333
        font-weight: 500
      .info
        display: flex
        justify-content: space-between
        padding: 5px 15px
        background: #fbfbfb
        color: #999
        font-size: 13px
        span
          margin-right: 30px
        em 
          font-style: normal
          margin-right: 10px
      .content-item
        padding: 20px 0
        img
          max-width: 100%
</style>
